<template>
    <div class="app-container">
        <el-row :gutter="5" style="height: 100%;">
            <el-col :span="5" style="height:100%">
                <el-card :style="{overflow:'auto',margin: '1px',padding: '3px',height:'100%'}" class="test-tree">
                    <el-row :gutter="5">
                        <el-form :model="queryParams" ref="queryRef">
                            <el-row :gutter="12">
                                <el-col :span="16">
                                    <el-form-item label="场景名称" prop="menuName">
                                        <el-input
                                            v-model="queryParams.menuName"
                                            placeholder="请输入场景名称"
                                            clearable
                                            @keyup.enter="handleQuery"
                                            :style="{width: '100%'}"
                                         />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item>
                                        <el-button type="primary" icon="Search" style="margin: 3px 3px"
                                                   v-hasPermi="['testmanage:autoTest:list']" @click="handleQuery">搜索
                                        </el-button>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-row>
                    <el-row>
                        <el-col :span="4">
                            <el-button
                                type="info"
                                style="margin: 3px 3px"
                                icon="Sort"
                                @click="toggleExpandAll"
                                v-hasPermi="['testmanage:autoTest:Expand']"
                            >展开/折叠
                            </el-button>
                        </el-col>
                    </el-row>
                    <xTable
                        ref="deptTable"
                        refId="deptTable"
                        v-if="refreshTable"
                        v-loading="loading"
                        :data="menuList"
                        :showCheckBox="false"
                        row-key="menuId"
                        multiple="false"
                        @selection-change="handleSelectionChange"
                        :default-expand-all="isExpandAll"
                        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                        :highlight-current-row="false"
                        :row-class-name="getRowClass"
                    >
                        <template #columList>
                            <el-table-column prop="menuName" label="测试场景"
                                             :show-overflow-tooltip="true">
                                <template #default="scope">
                                    <el-icon v-if="scope.row.menuType === 'D'" style="font-size: 15px; vertical-align: middle;">
                                        <FolderOpened />
                                    </el-icon>
                                    <el-icon v-if="scope.row.menuType === 'M'" style="font-size: 15px; vertical-align: middle;">
                                        <Collection />
                                    </el-icon>
                                    <span style="margin-left: 5px;">{{ scope.row.menuName }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center" width="50" class-name="small-padding fixed-width">
                                <template #default="scope">
                                    <el-dropdown v-if="scope.row.menuType=='D'">
                                        <div class="avatar-wrapper">
                                            <el-button type="primary" plain style="width: 30px" icon="Plus" v-hasPermi="['calc:otcOtion:basestructure']" @click.stop>
                                            </el-button>
                                        </div>
                                        <template #dropdown>
                                            <el-dropdown-menu>
                                                <el-dropdown-item v-hasPermi="['testmanage:autoTest:insert']" @click="handleAddAtMenu(scope.row)">
                                                    <el-icon style="font-size: 15px; vertical-align: middle;">
                                                        <SetUp />
                                                    </el-icon>
                                                    新建测试场景
                                                </el-dropdown-item>
                                                <el-dropdown-item v-hasPermi="['testmanage:autoTest:insert']" @click="handleAddAtDir(scope.row)">
                                                    <el-icon style="font-size: 15px; vertical-align: middle;">
                                                        <FolderAdd />
                                                    </el-icon>
                                                    新增子目录
                                                </el-dropdown-item>
                                                <el-dropdown-item v-hasPermi="['testmanage:autoTest:update']" @click="handleUpdateAtDir(scope.row)">
                                                    <el-icon style="font-size: 15px; vertical-align: middle;">
                                                        <Switch />
                                                    </el-icon>
                                                    修改目录信息
                                                </el-dropdown-item>
                                                <el-dropdown-item v-hasPermi="['testmanage:autoTest:delete']" @click="handleDeleteMenu(scope.row)">
                                                    <el-icon style="font-size: 15px; vertical-align: middle;">
                                                        <FolderRemove />
                                                    </el-icon>
                                                    删除子目录
                                                </el-dropdown-item>
                                            </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                    <el-dropdown v-if="scope.row.menuType=='M'">
                                        <div class="avatar-wrapper">
                                            <el-button type="primary" plain style="width: 30px" icon="MoreFilled"  v-hasPermi="['calc:otcOtion:basestructure']" @click.stop>
                                            </el-button>
                                        </div>
                                        <template #dropdown>
                                            <el-dropdown-menu>
                                                <el-dropdown-item v-hasPermi="['testmanage:autoTest:update']" @click="handleRenameMenu(scope.row)">
                                                    <el-icon style="font-size: 15px; vertical-align: middle;">
                                                        <Postcard />
                                                    </el-icon>
                                                    重命名
                                                </el-dropdown-item>
                                                <el-dropdown-item v-hasPermi="['testmanage:autoTest:delete']" @click="handleDeleteMenu(scope.row)">
                                                    <el-icon style="font-size: 15px; vertical-align: middle;">
                                                        <DocumentDelete />
                                                    </el-icon>
                                                    删除
                                                </el-dropdown-item>
                                            </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                </template>
                            </el-table-column>
                        </template>
                    </xTable>
                </el-card>
            </el-col>
            <el-col :span="19" style="height:100%">
                <el-row v-if="homeView" :gutter="12" style="height: 100%;">
                    <el-col :span="24">
                        <el-card :style="{overflow:'auto', margin: '0px', padding: '3px',height:'100%' }" >
                            <div style="display: flex; justify-content: center; align-items: center;height: 100%;">  
                                <div style="width: 100%; height: 40%; display: flex; flex-direction: column; justify-content: center; align-items: center;" class="test-check-remind">
                                    <!-- <el-icon style="font-size: 100px; text-align: center;">
                                        <DArrowLeft />
                                    </el-icon> -->
                                    <svg width="160" height="160" viewBox="0 0 160 160" fill="none">
                                        <path d="M132.635 52.7296C134.76 52.7296 136.475 51.0063 136.475 48.8897C136.475 46.7638 134.76 45.0498 132.635 45.0498C130.519 45.0498 128.795 46.7638 128.795 48.8897C128.795 51.0063 130.519 52.7296 132.635 52.7296Z" fill="#F2F4F7"></path>
                                        <path d="M131.568 132.139C133.268 132.139 134.64 130.757 134.64 129.067C134.64 127.367 133.268 125.995 131.568 125.995C129.879 125.995 128.496 127.367 128.496 129.067C128.496 130.757 129.879 132.139 131.568 132.139Z" fill="#F2F4F7"></path>
                                        <path d="M39.9036 39.8081C41.1766 39.8081 42.2076 38.7713 42.2076 37.5042C42.2076 36.2288 41.1766 35.2002 39.9036 35.2002C38.6315 35.2002 37.5996 36.2288 37.5996 37.5042C37.5996 38.7713 38.6315 39.8081 39.9036 39.8081Z" fill="#F2F4F7"></path>
                                        <path d="M140.815 96.0002C140.666 96.0002 140.531 95.9006 140.488 95.7584L139.963 93.9234C139.486 92.2378 138.172 90.9292 136.488 90.4527L134.647 89.9264C134.469 89.8766 134.363 89.6917 134.413 89.5138C134.441 89.4001 134.533 89.3147 134.647 89.2791L136.488 88.7528C138.172 88.2763 139.486 86.9677 139.963 85.2821L140.488 83.4471C140.538 83.2693 140.723 83.1627 140.908 83.2124C141.021 83.248 141.107 83.3334 141.142 83.4471L141.668 85.2821C142.144 86.9677 143.459 88.2763 145.143 88.7528L146.984 89.2791C147.161 89.3503 147.246 89.5565 147.175 89.7343C147.14 89.8197 147.069 89.8908 146.984 89.9264L145.143 90.4527C143.459 90.9292 142.144 92.2449 141.668 93.9234L141.142 95.7584C141.1 95.9006 140.965 96.0002 140.815 96.0002Z" fill="#d8ebff"></path>
                                        <path d="M76.8164 31.1998C76.6485 31.1998 76.4967 31.0878 76.4487 30.9278L75.8571 28.8634C75.3215 26.9671 73.8425 25.4949 71.9478 24.9588L69.8772 24.3667C69.6773 24.3107 69.5574 24.1027 69.6134 23.9027C69.6454 23.7746 69.7493 23.6786 69.8772 23.6386L71.9478 23.0465C73.8425 22.5104 75.3215 21.0382 75.8571 19.1419L76.4487 17.0776C76.5046 16.8776 76.7125 16.7576 76.9204 16.8136C77.0483 16.8536 77.1442 16.9496 77.1842 17.0776L77.7757 19.1419C78.3113 21.0382 79.7904 22.5104 81.6851 23.0465L83.7557 23.6386C83.9555 23.7186 84.0514 23.9507 83.9714 24.1507C83.9315 24.2467 83.8516 24.3267 83.7557 24.3667L81.6851 24.9588C79.7904 25.4949 78.3113 26.9751 77.7757 28.8634L77.1842 30.9278C77.1362 31.0878 76.9843 31.1998 76.8164 31.1998Z" fill="#d8ebff"></path>
                                        <path d="M22.4108 76.8002C22.2989 76.8002 22.1976 76.7255 22.1657 76.6188L21.7713 75.2426C21.4142 73.9784 20.4282 72.9969 19.165 72.6395L17.7847 72.2448C17.6514 72.2075 17.5715 72.0688 17.6088 71.9354C17.6301 71.8501 17.6994 71.7861 17.7847 71.7594L19.165 71.3647C20.4282 71.0073 21.4142 70.0258 21.7713 68.7616L22.1657 67.3854C22.203 67.2521 22.3415 67.172 22.4801 67.2094C22.5654 67.2361 22.6293 67.3001 22.656 67.3854L23.0503 68.7616C23.4074 70.0258 24.3935 71.0073 25.6566 71.3647L27.037 71.7594C27.1702 71.8128 27.2341 71.9674 27.1808 72.1008C27.1542 72.1648 27.1009 72.2181 27.037 72.2448L25.6566 72.6395C24.3935 72.9969 23.4074 73.9838 23.0503 75.2426L22.656 76.6188C22.624 76.7255 22.5227 76.8002 22.4108 76.8002Z" fill="#d8ebff"></path>
                                        <g filter="url(#filter0_d_3704_328779)"><rect x="37.8398" y="41.4395" width="84.48" height="84.48" rx="42.24" fill="white"></rect></g><path fill-rule="evenodd" clip-rule="evenodd" d="M75.1163 67.1949C76.6159 65.6953 76.6159 63.264 75.1163 61.7644C73.6167 60.2647 71.1853 60.2647 69.6857 61.7644L58.1657 73.2844C56.6661 74.784 56.6661 77.2153 58.1657 78.7149L69.6857 90.2349C71.1853 91.7346 73.6167 91.7346 75.1163 90.2349C76.6159 88.7353 76.6159 86.304 75.1163 84.8044L66.3116 75.9996L75.1163 67.1949Z" fill="#c5e1ff"></path>
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M90.4752 77.1247C88.9756 75.6251 86.5442 75.6251 85.0446 77.1247C83.545 78.6243 83.545 81.0557 85.0446 82.5553L93.8493 91.36L85.0446 100.165C83.545 101.664 83.545 104.096 85.0446 105.595C86.5442 107.095 88.9756 107.095 90.4752 105.595L101.995 94.0753C103.495 92.5757 103.495 90.1443 101.995 88.6447L90.4752 77.1247Z" fill="#ebf5ff"></path>
                                        <path d="M35.0084 125.216C37.5534 125.216 39.6164 123.152 39.6164 120.608C39.6164 118.065 37.5534 116 35.0084 116C32.4634 116 30.4004 118.065 30.4004 120.608C30.4004 123.152 32.4634 125.216 35.0084 125.216Z" fill="#ebf5ff"></path>
                                        <defs><filter id="filter0_d_3704_328779" x="18.6398" y="23.8395" width="122.88" height="122.88" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix><feOffset dy="1.6"></feOffset><feGaussianBlur stdDeviation="9.6"></feGaussianBlur><feColorMatrix type="matrix" values="0 0 0 0 0.397708 0 0 0 0 0.47749 0 0 0 0 0.575 0 0 0 0.08 0"></feColorMatrix><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3704_328779"></feBlend><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3704_328779" result="shape"></feBlend></filter></defs>
                                    </svg>
                                    <span style="margin-top: 10px; font-size: 18px; color= ">从左侧选择一个测试场景</span>
                                    <span style="margin-top: 10px; font-size: 18px; color= ">或</span>
                                    <el-button @click="handleAddAtMenu()" v-hasPermi="['testmanage:autoTest:insert']" style="width: 140px; height: 36px; margin-top: 10px; font-size: 16px;" size="m" type="primary">新建测试场景</el-button>
                                </div> 
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <TabList v-if="!homeView"  v-model="tabsValue" :tabList="atTabs" nameValue="menuId" :lableValue="'menuName'"  @tab-remove="removeTab" class="demo-tabs page-tabs" style="height:100%">
                    <template #default="{ item }">
                        <AutoTestTab :menuDetailform="item" :menuOptions="menuOptions" @getList="getList" ></AutoTestTab>     
                    </template>
                </TabList>
            </el-col>
        </el-row>
        <!-- 新增测试场景 -->
        <el-dialog :close-on-click-modal="false" draggable="true" :title="addAtMenuTitle" v-model="openAtMenuForm" width="500px"
               append-to-body>
            <el-form ref="AtMenuRef" :model="atMenuForm" :rules="atMenuRules" label-width="100px">

                <el-form-item label="名称" prop="menuName">
                    <el-input v-model="atMenuForm.menuName" maxlength="30" placeholder="请输入测试场景名称"/>
                </el-form-item>

                <el-form-item label="顺序" prop="orderNum">
                    <el-input-number v-model="atMenuForm.orderNum" style="width:50%" controls-position="right" :min="0"/>
                </el-form-item>

                <el-form-item label="状态">
                    <el-radio-group v-model="atMenuForm.status">
                        <el-radio
                            v-for="dict in sys_normal_disable"
                            :key="dict.dictValue"
                            :label="dict.dictValue"
                        >{{ dict.dictLabel }}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="上级目录" prop="parentId">
                    <el-tree-select
                        style="width:100%"
                        v-model="atMenuForm.parentId"
                        :data="menuOptions"
                        :props="{ value: 'menuId', label: 'menuName', children: 'children' }"
                        value-key="menuId"
                        placeholder="请选择上级目录"
                        check-strictly
                    />
                </el-form-item>
                <el-form-item label="说明">
                    <el-input v-model="atMenuForm.remark" maxlength="300" type="textarea" placeholder="请输入内容"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancelFrom">取 消</el-button>
            </div>
            </template>
        </el-dialog>
        <!-- 新增目录 -->
        <el-dialog :close-on-click-modal="false" draggable="true" :title="addAtDirTitle" v-model="openAtDirForm" width="500px"
               append-to-body>
            <el-form ref="AtDirRef" :model="atDirForm" :rules="atDirRules" label-width="100px">
                <el-form-item label="名称" prop="menuName">
                    <el-input v-model="atDirForm.menuName" maxlength="30" placeholder="请输入目录"/>
                </el-form-item>
                <el-form-item label="顺序" prop="orderNum">
                    <el-input-number v-model="atDirForm.orderNum" style="width:50%" controls-position="right" :min="0"/>
                </el-form-item>
                <el-form-item v-if="atDirForm.menuId != 1" label="上级目录" prop="parentId">
                    <el-tree-select
                        style="width:100%"
                        v-model="atDirForm.parentId"
                        :data="menuOptions"
                        :props="{ value: 'menuId', label: 'menuName', children: 'children' }"
                        value-key="menuId"
                        placeholder="请选择上级目录"
                        check-strictly
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitDir">确 定</el-button>
                    <el-button @click="cancelDir">取 消</el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog :close-on-click-modal="false" draggable="true" title="重命名" v-model="renameView" width="600px"
               append-to-body>
            <el-row style=" margin-top: 10px;" v-if="false">
                <span style=" margin-left: 50px;">ID</span>
            </el-row>
            <el-row style=" margin-top: 10px;" v-if="false"> 
                <div style=" width: 70%; margin-left: 50px;">
                    <el-input size="large" v-model="menuId" />
                </div>
            </el-row>
            <el-row style=" margin-top: 10px;">
                <span style=" margin-left: 50px;">场景名称</span>
            </el-row>
            <el-row style=" margin-top: 10px;"> 
                <div style=" width: 70%; margin-left: 50px;">
                    <el-input size="large" v-model="menuName" />
                </div>
            </el-row>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitMenuName">确 定</el-button>
                    <el-button @click="cancelMenuName">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="AutoTest">

import {getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs, watch} from "vue";
import * as components from '@element-plus/icons-vue'
import Numberinput from '@/lz/base/number'
import useTestResultStore from '@/store/modules/testResult'
import AutoTestTab from '@/views/testmanage/autotest/component/autoTestTab'
import {
  listInf,
  delInf,
} from "@/api/testmanage/sstinf";

import {
    selectTsstAutoTestMenuList,
    addAtMenu,
    getMenuDetail,
    updateAtMenu,
    deleteAtMenu,
} from "@/api/testmanage/autoTest";

import {div, isNotVoid, isVoid, mul} from "@/utils/util";
import TabList from '@/components/TabList/index'

const {proxy} = getCurrentInstance();
const {sys_normal_disable, reportStatus, reportType} = proxy.useDict("sys_normal_disable", "reportStatus", "reportType");
const addAtMenuTitle=ref("新增测试场景")
const addAtDirTitle=ref("")

const menuList = ref([]);
const infAllCheck = ref(false);
const renameView = ref(false);
const checkList = ref([])
const reportCheckList = ref([])
const loading = ref(true);

const isExpandAll = ref(true);
/*抽屉展示开关*/
const refreshTable = ref(true);

const selectRowData = ref([]);
const openAtMenuForm = ref(false);
const openAtDirForm = ref(false);

const homeView = ref(true);
const menuName = ref("")
const menuId = ref("")

const tabsValue = ref("")
const atTabs = ref([]);
const menuOptions = ref([]);

const action = ref("")

const bodyRow = ref((document.documentElement.clientHeight - 185)/24)
const resultBodyRow = ref((document.documentElement.clientHeight - 185)/25)
const jsonBodyHeight = ref(document.documentElement.clientHeight - 430 + "px");
const jsonResultHeight = ref(document.documentElement.clientHeight - 350 + "px");
const bodyHeight = ref(document.documentElement.clientHeight - 195 + "px");
const mainBodyHeight = ref(document.documentElement.clientHeight - 158 + "px");
const screenHeight = ref(document.documentElement.clientHeight - 105 + "px");

import {useRouter} from "vue-router";
const router = useRouter();

const data = reactive({
    menuDetailform: {
        menuId: '',
        menuName: '',
        remark: '',
        createBy: '',
        cycleNumber: '1',
        threadNumber: '1',
        runEnv: '',
        createTime: '',
        updateBy: '',
        updateTime: '',
        mcs: true,
        infList: []
    },
    atMenuForm: {
        menuName: null,
        orderNum: null,
        status: 0,
        parentId: null,
        menuType: null,
        remark: null
    },
    atDirForm: {
        menuName: null,
        orderNum: null,
        status: 0,
        parentId: null,
        menuType: null,
    },
    infListForm: {
        menuId: '',
        infName: '',
        status: 0,
        infs: []
    },
    // 菜单根目录
    rootMenu : {
        menuName: null,
        orderNum: null,
        status: 0,
        parentId: null,
        menuType: null,
    },
    queryParams: {
        menuName: undefined
    },
    queryReportParams: {
        pageNum: 1,
        pageSize: 10,
    },
    atMenuRules: {
        menuName: [{required: true, message: "名称不能为空", trigger: "change"}],
        orderNum: [{required: true, message: "顺序不能为空", trigger: "change"}],
        status: [{required: true, message: "状态不能为空", trigger: "change"}],
        parentId: [{required: true, message: "上级目录不能为空", trigger: "blur"}],
    },
    atDirRules: {
        menuName: [{required: true, message: "名称不能为空", trigger: "change"}],
        orderNum: [{required: true, message: "顺序不能为空", trigger: "change"}],
        parentId: [{required: true, message: "上级目录不能为空", trigger: "blur"}],
    },
});

const {queryParams, atMenuRules, atMenuForm, atDirForm, atDirRules, rootMenu, menuDetailform, infListForm, queryReportParams} = toRefs(data);

//监听接口输入框进行过滤
watch(() => infListForm.value.infName, val => {
    proxy.$refs["infRef"].filter(val);
});

function resetAtMenu() {
    atMenuForm.value = {
        menuName: null,
        orderNum: null,
        status: null,
        parentId: null,
        menuType: null,
        remark: null
    },
    proxy.resetForm("AtMenuRef");
}

function resetAtDir() {
    atDirForm.value = {
        menuName: null,
        orderNum: null,
        status: 0,
        parentId: null,
        menuType: null,
    },
    proxy.resetForm("AtDirRef");
}

watch(() => queryParams.value.menuName, (nv, ov) => {
    if (nv !== ov) {
        handleQuery()
    }
})

watch(() => atTabs, (nv, ov) => {
    if (atTabs.value.length > 0) {
        homeView.value = false
    } else {
        homeView.value = true
    }
},{ deep: true, immediate: true })

/** 查询测试场景列表 */
function getList() {
    loading.value = true;
    selectTsstAutoTestMenuList(queryParams.value).then(response => {
        let list = response.data
        menuList.value = proxy.handleTree(list, "menuId");
        //设置根节点
        for (let i = 0, len = list.length; i < len; i++) {
            if (list[i].menuId === 1) {
                rootMenu.value = list[i]
            }
        }
        loading.value = false;
    });
}


/** 搜索按钮操作 */
function handleQuery() {
    getList();
}

/** 新增测试场景按钮操作 */
async function handleAddAtMenu(row) {
    if (row == undefined) {
        row = rootMenu.value
    }
    resetAtMenu();
    const queryData = {
        menuType : 'D'
    }
    await selectTsstAutoTestMenuList(queryData).then(response => {
        menuOptions.value = proxy.handleTree(response.data, "menuId");
    })
    openAtMenuForm.value = true;
    atMenuForm.value.parentId = row.menuId
    atMenuForm.value.status = '0'
    atMenuForm.value.menuType = 'M';
}

//场景取消框
function cancelFrom() {
    resetAtMenu();
    openAtMenuForm.value = false;
}

/** 新增目录按钮操作 */
async function handleAddAtDir(row) {
    resetAtDir();
    addAtDirTitle.value = "新增目录"
    action.value = 'insert'
    const queryData = {
        menuType : 'D'
    }
    await selectTsstAutoTestMenuList(queryData).then(response => {
        menuOptions.value = proxy.handleTree(response.data, "menuId");
    })
    openAtDirForm.value = true;
    atDirForm.value.parentId = row.menuId
    atDirForm.value.menuType = 'D';
}

//目录取消框
function cancelDir() {
    resetAtDir();
    openAtDirForm.value = false;
}

//递归获取目录 目录表单
function platformDir(row) {
    if (isVoid(row.parentId)) {// 若无父节点，则直接返回
        return
    }
    // 拼接path
    for (let i = 0, len = menuList.value.length; i < len; i++) {
        if (menuList.value[i].menuId = row.parentId) {
            atDirForm.value.path = menuList.value[i].menuName + '/' + atDirForm.value.path
            platformDir(menuList.value[i])
        }
    }
}

//递归获取目录 场景表单
function platformMenu(row) {
    if (isVoid(row.parentId)) {// 若无父节点，则直接返回
        return
    }
    // 拼接path
    for (let i = 0, len = menuList.value.length; i < len; i++) {
        if (menuList.value[i].menuId = row.parentId) {
            atMenuForm.value.path = menuList.value[i].menuName + '/' + atMenuForm.value.path
            platformMenu(menuList.value[i]) 
        }
    }
}

/** 展开/折叠操作 */
function toggleExpandAll() {
  refreshTable.value = false;
  isExpandAll.value = !isExpandAll.value;
  nextTick(() => {
    refreshTable.value = true;
  });
}

/** 通过条件过滤接口节点  */
const filterNode = (value, data) => {
  if (!value) return true;
  return data.infName.indexOf(value) !== -1;
};

/** 提交按钮目录 */
function submitForm() {
    proxy.$refs["AtMenuRef"].validate(valid => {
        if (valid) {
            if (atMenuForm.value.menuId != undefined) {
                proxy.$modal.msgSuccess("修改成功");
                open.value = false;
                getList();
            } else {
                addAtMenu(atMenuForm.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    openAtMenuForm.value = false;
                    getList();
                });
            }
        }
    });
}

/** 提交目录目录 */
function submitDir() {
    proxy.$refs["AtDirRef"].validate(valid => {
        if (valid) {
            if (action.value != 'insert') {
                updateAtMenu(atDirForm.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    openAtDirForm.value = false;
                    getList();
                })
            } else {
                addAtMenu(atDirForm.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    openAtDirForm.value = false;
                    getList();
                });
            }
        }
    });
}

/** 删除按钮操作 */
function handleDelete() {
    let row = selectRowData.value[0];
    proxy.$modal.confirm('是否确认删除名称为"' + row.infName + '"的数据项?').then(function () {
        return delInf(row.infId);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => {
    });
}

/** 选中数据 */
async function handleSelectionChange(selection) {
    if (selection.length == 1) {
        let menu = Object.assign({}, selection[0])
        if (isNotVoid(menu.menuType) && menu.menuType == 'D') {
            return
        }
        tabsValue.value = menu.menuId
        for (var i = 0; i < atTabs.value.length; i++) {
            if (atTabs.value[i].menuId == tabsValue.value) {
                return
            }
        }
        const queryData = {
            menuType : 'D'
        }
        await selectTsstAutoTestMenuList(queryData).then(response => {
            menuOptions.value = proxy.handleTree(response.data, "menuId");
        })
        menu.menuNameInput = menu.menuName;
        atTabs.value.push(menu)
        resetData() 
    }
}

function resetData() {
    infAllCheck.value = false
    checkList.value = []
    reportCheckList.value = []
}

//重命名
function handleRenameMenu(row) {
    renameView.value = true
    menuName.value = row.menuName
    menuId.value = row.menuId
}

//重命名提交
function submitMenuName() {
    const formData = {
        menuId : menuId.value,
        menuName : menuName.value
    }
    updateAtMenu(formData).then(response => {
        if (response.code == 0) {
            proxy.$modal.msgSuccess("保存成功");
            renameView.value = false
            menuDetailform.value.menuName = menuName.value
            resetRename()
            getList();
        } else {
            proxy.$modal.msgError("保存失败");
        }
    });
}

function cancelMenuName() {
    renameView.value = false
    resetRename()
}

function resetRename() {
    menuId.value = ''
    menuName.value = ''
}

async function handleUpdateAtDir(row) {
    addAtDirTitle.value = "修改目录"
    action.value = 'update'
    openAtDirForm.value = true
    atDirForm.value.menuId = row.menuId
    atDirForm.value.menuName = row.menuName
    atDirForm.value.orderNum = row.orderNum
    atDirForm.value.status = row.status
    atDirForm.value.parentId = row.parentId
    atDirForm.value.menuType = row.menuType
    const queryData = {
        menuType : 'D',
        excludeId: row.menuId
    }
    await selectTsstAutoTestMenuList(queryData).then(response => {
        menuOptions.value = proxy.handleTree(response.data, "menuId");
    })
}

function handleDeleteMenu(row) {
    proxy.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项?').then(function () {
        const deleteData = {
            menuId : row.menuId
        }
        deleteAtMenu(deleteData).then(response => {
            if (response.code == 0) {
                proxy.$modal.msgSuccess("删除成功");
                getList();
            } else {
                proxy.$modal.msgError(response.msg);
            }
        });
    }).then(() => {
    }).catch(() => {
    });
}

function removeTab(targetValue) {
    const tabs = atTabs.value
    let activeName = tabsValue.value
    if (activeName == targetValue) {
        tabs.forEach((tab, index) => {
            if (tab.menuId === targetValue) {
                const nextTab = tabs[index + 1] || tabs[index - 1]
                if (nextTab) {
                    activeName = nextTab.menuId
                }
            }
        })
    }
    tabsValue.value = activeName
    atTabs.value = tabs.filter((tab) => tab.menuId !== targetValue)
}

//点击分配用户按钮
onMounted(() => {
  setTimeout(() => {
  }, 300);
  window.onresize = function temp() {
    screenHeight.value = document.documentElement.clientHeight - 350 + "px;";
   };
})

// 高亮选中接口
const highlightRow=ref({});
const getRowClass=({row,rowIndex})=>{
    if (row.menuId == tabsValue.value) {
        row.rowIndex=rowIndex
        highlightRow.value=row;
        return 'current-row'
    }
    return '' 
}
// 滚动到指定行
const scrollToTableRow=(tableElement,rowIndex)=>{
    const theTableRows = tableElement.$el.querySelectorAll('.el-table__body tbody .el-table__row')
    let scrollTop = 0
    for (let i = 0; i < theTableRows.length; i++) {
        if (i === rowIndex) {
            break
        }
        scrollTop += theTableRows[i].offsetHeight
    }
    tableElement.scrollTo({top:scrollTop-200,behavior: "smooth"});
}
// 滚动到选中接口
watch(()=>highlightRow.value,(newValue,oldValue)=>{
    if(newValue && newValue != oldValue){
        const tableElement=proxy.$refs.deptTable?.$refs.deptTable
        if(tableElement){
            scrollToTableRow(tableElement,newValue.rowIndex)
        }
    }
})

getList();
</script>
<style scoped>
.el-row {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    box-sizing: border-box;
    width: 100%;
}

.custom-input {
  position: relative;
  display: inline-block;
  width: 100%;
}

.custom-input input {
  display: block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  color: #333;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #ccc;
  outline: none;
}

#selectForm >>> .el-form-item__label {
  font-size: 25px;
}
.rounded-card {
  border-radius: 15px;
  background-color: #f8fafb;
  height:100%;
}

.custom-input input:focus {
  border-bottom-color: #409EFF;
}

.center-top {
    margin: auto;
    margin-top: 5px;
    width: 90%;
    padding: 10px;
}
.center {
    margin: auto;
    margin-top: 5px;
    width: 90%;
    background-color: #f8f8f8;
    padding: 10px;
}
.item {
    margin-left: 20px;
    font-size: 20px;
	font-weight: bold;
}

.hover-effect {
   /* color: black;  */
   /* 初始字体颜色 */
}

.hover-effect:hover {
  color: #409eff; /* 鼠标放上去后的字体颜色 */
}
/* 修改进度条的底色 */
/deep/.custom-progress .el-progress-bar__outer {
  background-color: #E95477;
}

</style>
<style lang="scss" scoped>
.app-container{
    .test-tree{
        :deep(.el-card__body){
            display: flex;
            flex-direction: column;
        }
        
    }
    .el-card{
        :deep(.el-card__body){
            height: 100%;
        }
    }
   .test-check-remind{
        color:var(--el-text-color-regular)
   }
   .demo-tabs{
        display:flex;
        flex-direction:column;
        :deep(.el-tabs__content){
            flex:1;
            .el-tab-pane{
                height:100%;
            }
        }
    }
}
</style>
